const path = require('path')
const globalConfig  = require('./configs/index')
module.exports = {
  head: {
    title: '迷之de小孩灬',
    htmlAttrs: {
      lang: 'zh-cn',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: '有些迷茫，但又有些梦想',
      },
      { name: 'format-detection', content: 'telephone=no' },
      {
        hid: 'author',
        name: 'author',
        content: '迷之de小孩灬,lginsane',
      },
      {
        hid: 'keywords',
        name: 'keywords',
        content:
          '迷之de小孩灬,lginsane,个人博客,前端文章,前端博客,前端技术,美食,音乐',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  css: [
    '@/assets/css/index.less',
    '@/assets/css/iconfont.css',
    'element-ui/lib/theme-chalk/index.css'
  ],

  plugins: [
    { src: '~/plugins/axios.js', ssr: true },
    { src: '~/plugins/pinia.js', ssr: true },
    { src:"@/plugins/element-ui.js", ssr: true },
    { src:"@/plugins/vue-infinite-scroll.js", ssr: false },
    { src: '@/plugins/icons.js', ssr: true },
    { src: '~/plugins/api.js', ssr: true },
    { src: '@/plugins/format', ssr: true },
    { src: '~/plugins/directive/loading/index.js', ssr: false },
  ],

  components: true,

  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/composition-api/module',
    '@pinia/nuxt',
  ],

  modules: [
    '@nuxtjs/axios',
    '@pinia/nuxt',
    '@nuxtjs/toast',
    '@nuxtjs/style-resources',
    '@nuxtjs/device',
    'nuxt-precompress'
  ],

  nuxtPrecompress: {
    gzip: {
      enabled: true,
      filename: '[path].gz[query]',
      threshold: 10240,
      minRatio: 0.8,
      compressionOptions: { level: 9 },
    },
    brotli: {
      enabled: true,
      filename: '[path].br[query]',
      compressionOptions: { level: 11 },
      threshold: 10240,
      minRatio: 0.8,
    },
    enabled: true,
    report: false,
    test: /\.(js|css|html|txt|xml|svg)$/,
    // Serving options
    middleware: {
      enabled: true,
      enabledStatic: true,
      encodingsPriority: ['br', 'gzip'],
    },
  },

  styleResources: {
    less: '@/assets/css/variables.less',
  },
  toast: {
    theme: 'bubble',
    position: 'top-center',
    duration: 3000,
    singleton: false,
    iconPack: 'custom-class',
  },
  axios: {
    proxy: process.env.NODE_ENV === 'development',
    headers: {
      'Access-Control-Allow-Origin': '*',
      'X-Requested-With': 'XMLHttpRequest',
      'Content-Type': 'application/json; charset=UTF-8'
    },
    baseURL: globalConfig.baseURL
  },
  proxy: {
    '/blog': {
      target: globalConfig.baseURL,
      changeOrigin: true
    },
    '/random': {
      target: 'https://api.r10086.com/img-api.php',
      changeOrigin: true,
    },
  },

  build: {
    analyze: true,
    // 开启代码压缩
    compress: true,

    // 启用代码分割，将第三方库和公共代码分割到单独的文件中
    splitChunks: {
      chunks: 'all',
      name(module) {
        if (module.resource && /^.*\/node_modules\/(element-ui)\/.*$/.test(module.resource)) {
            return 'element-ui'; // 指定要分割的模块名称为 "element-ui"
        } else {
            return false; // 不需要分割的模块返回 false
        }
      },
      layouts: true,
      pages: true,
      commons: true,
    },

    // 优化器配置
    optimizer: {
      // 启用 CSS 压缩
      css: {
        minimize: true
      },

      // 启用 JavaScript 压缩
      js: {
        compress: {
          drop_console: true, // 移除 console 语句
          collapse_vars: true, // 内嵌定义了但是只用到一次的变量
          reduce_vars: true // 提取出出现多次但是没有定义成变量去引用的静态值
        }
      }
    },

    // 启用 Vue Loader 的优化选项
    vueLoader: {
      transformToRequire: {
        video: 'src',
        source: 'src',
        img: 'src',
        image: 'xlink:src'
      }
    },

    // Webpack 配置
    webpack(config, { isDev, isClient }) {
      if (!isDev && isClient) {
        // 生产环境客户端构建配置
        config.optimization.minimize(true);
      }
    },

    // element-ui按需加载
    transpile: [/^element-ui/],
    babel: {
      plugins: [
        [
          'component',
          {
            libraryName: 'element-ui',
            styleLibraryName: 'theme-chalk'
          }
        ]
      ]
    },

    extend(config, ctx) {
      const svgRule = config.module.rules.find((rule) => rule.test.test('.svg'))
      svgRule.exclude = [path.resolve(__dirname, 'assets/icons/svg')]
      config.module.rules.push({
        test: /\.svg$/,
        include: [path.resolve(__dirname, 'assets/icons/svg')],
        loader: 'svg-sprite-loader',
        options: {
          symbolId: 'icon-[name]',
        },
      })
    },
  },
  env: {
    baseUrl: globalConfig.baseURL,
  },
  telemetry: false,
  device: {
    refreshOnResize: true,
  },
  loading: {
    color: '#42d392',
    height: '2px',
  },
  server: {
    port: 8000, // default: 3000
    host: '0.0.0.0', // default: localhost,
    timing: false
  },
}
